<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <label for="注册账号">
            <input id="sign-in-username" type="text" placeholder="注册账号">
        </label>
        <label for="注册密码">
            <input id="sign-in-password" type="password" placeholder="注册密码">
        </label>
        <button id="sign-in-btn">注册</button>
        <i id="sign-in-status"></i>
    </div>
    <hr/>
    <div>
        <label for="登录账号">
            <input id="login-username" type="text" placeholder="注册账号">
        </label>
        <label for="登录密码">
            <input id="login-password" type="password" placeholder="注册密码">
        </label>
        <button id="login-btn">登录</button>
        <i id="login-status"></i>
    </div>
</body>
<script>
    // 注册
    document.getElementById("sign-in-btn").onclick = (event) => {
        const xhr = new XMLHttpRequest();
        xhr.open("POST","http://127.0.0.1:8020/api/reguser");
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.onload = ({currentTarget}) => {
            const res = JSON.parse(currentTarget.responseText);
            document.getElementById("sign-in-status").innerText = res["message"];
        };
        xhr.send(JSON.stringify({
            username: document.getElementById("sign-in-username").value,
            password: document.getElementById("sign-in-password").value
        }));
    };
    // 登录
    document.getElementById("login-btn").onclick = (event) => {
        const xhr = new XMLHttpRequest();
        xhr.open("POST","http://127.0.0.1:8020/api/login");
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.onload = ({currentTarget}) => {
            const res = JSON.parse(currentTarget.responseText);
            document.getElementById("login-status").innerText = res["message"];
        };
        xhr.send(JSON.stringify({
            username: document.getElementById("login-username").value,
            password: document.getElementById("login-password").value
        }));
    };
</script>
</html>